@import "~./methods.less";
@import '//fonts.useso.com/css?family=Roboto:300,400,500,700,400italic';
@import 'https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';

.container {
    position: relative;
}

.material-icons {
    width: 1em;
}

a {
    cursor: pointer;
}

.mu-table {

    th,
    td {
        text-align: center;
    }

    th.is-sortable {
        padding-left: 0;
    }
}

.mu-item-wrapper.router-link-active>.mu-item {
    color: #2196f3;

    .mu-icon {
        color: #2196f3;
    }
}

.mu-table th {
    padding: 12px;
}

.mu-table td {
    padding: 3px 12px;
}

:focus {
    outline: none;
}

.scrollY {
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: .3rem;
    }

    &::-webkit-scrollbar-thumb {
        width: 0;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 1rem
    }
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.nowrap {
    display: inline-block;
    white-space: nowrap;
}

.tac {
    text-align: center !important;
}

.tar {
    text-align: right !important;
}

.big {
    font-size: larger !important;
}

.small {
    font-size: smaller !important;
}

.btn {
    cursor: pointer;
}

// .hide {
//     opacity: 0;
//     pointer-events: none;
// }

// .show {
//     opacity: 1;
//     pointer-events: auto;
// }

.red {
    color: @red;
}

.pink {
    color: @pink;
}

.purple {
    color: @purple;
}

.deepPurple {
    color: @deepPurple;
}

.indigo {
    color: @indigo;
}

.blue {
    color: @blue;
}

.lightBlue {
    color: @lightBlue;
}

.cyan {
    color: @cyan;
}

.teal {
    color: @teal;
}

.green {
    color: @green;
}

.lightGreen {
    color: @lightGreen;
}

.lime {
    color: @lime;
}

.yellow {
    color: @yellow;
}

.amber {
    color: @amber;
}

.orange {
    color: @orange;
}

.deepOrange {
    color: @deepOrange;
}

.brown {
    color: @brown;
}

.blueGrey {
    color: @blueGrey;
}

.grey {
    color: @grey;
}